<template>
  <transition name="">
    <div class="evalutiondesc">
      <v-header title="点评详情"></v-header>
      <scroll style="overflow: hidden; height: 100%" ref="scroll" :bounce="true">
            <div class="evalution">
                <div class="evalutionImg">
                    <img src="http://p0w4yb0aj.bkt.clouddn.com/background_my.jpg" alt="" style="width:50px;height:50px;border-radius: 50%;">
                </div>
                <div class="evalutionText">
                    <div class="raterWrapper">
                        <rater v-model="starNum"></rater>
                        <p>
                            2018-08-08
                        </p>
                    </div>
                    <div class="evalutionTitle">
                        <p>
                            天公不作美，云遮雾罩，不见天池，无功而返。
                        </p>
                    </div>
                    <div class="imageWrapper">
                        <img data-v-74d2446e="" src="http://p0w4yb0aj.bkt.clouddn.com/background_my.jpg" alt="" style="width: 90px; height: 90px;margin-top:10px">
                        <img data-v-74d2446e="" src="http://p0w4yb0aj.bkt.clouddn.com/background_my.jpg" alt="" style="width: 90px; height: 90px;margin-top:10px">
                        <img data-v-74d2446e="" src="http://p0w4yb0aj.bkt.clouddn.com/background_my.jpg" alt="" style="width: 90px; height: 90px;margin-top:10px">
                    </div>
                    <div class="productWrapper">
                        <div class="productImg">
                            <img  class="productImgNext" src="http://p0w4yb0aj.bkt.clouddn.com/background_my.jpg" alt="" style="width:30px;height:30px;">
                        </div>
                        <div class="productCell">
                            <cell title="凯里博莱曼大酒店" is-link></cell>
                        </div>
                    </div>
                </div>
            </div>
      </scroll>
    </div>
  </transition>
</template>

<script>
import VHeader from '@/components/v-header/v-header'
import Scroll from '@/components/scroll/scroll'
import { isIOS, isIphoneX } from '@/assets/js/brower'
import { Rater, Cell } from 'vux'
export default {
  data () {
    return {
      starNum: 5
    }
  },
  components: {
    VHeader, Scroll, isIOS, isIphoneX, Rater, Cell
  },
  mounted () {
    this.$refs.scroll.$el.style.height = (window.innerHeight - 64 - 44) + 'px'
  },
  created () {
    // this.paddingTop = 10
    // if (isIphoneX()) {
    //   this.paddingTop += 40
    // } else {
    //   this.paddingTop += 26
    // }
  },
  methods: {
  },
  watch: {
  }
}
</script>

<style lang="stylus" scoped>
  @import '~@/assets/css/variable.styl'
  .evalutiondesc{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0px;
    background-color: white;
    z-index: 101;
  }

  .evalution {
    margin-bottom 10px
    background-color white
    padding-top 15px
    padding-left 15px
    padding-right 15px
    padding-bottom 10px
    display flex
    .evalutionImg {
      width 15%
    }
    .evalutionText {
      width 85%
      .raterWrapper p {
        color: $color-text-2
        font-size: $font-size-desc
        margin-left 5px
      }
      .evalutionTitle {
        margin-top 10px
        font-family: '宋体' 
        color: $color-text-2
      }
      .productWrapper {
        margin-top 10px
        display flex
        background-color: $color-background
        .productImg {
          width 10%
          .productImgNext {
            margin-top 7px
            margin-left 10px
          }
        }
        .productCell {
          width 90%
        }
      }
    }
  }
</style>
